<!--
 * @Author: malgee
 * @Date: 2025-04-23 13:49:53
 * @LastEditors: maling
 * @LastEditTime: 2025-04-27 13:20:16
 * @FilePath: /vue3-ts-cms/src/components/nav-header/src/nav-header.vue
 * @Description: 
 * 
-->
<template>
  <div class="nav-header">
   <el-icon @click="handleFold" class="fold-menu">
    <Expand v-if="isFold"/>
    <Fold v-else/>
  </el-icon>
   <div class="content">
    <mg-breadcrumb :breadcrumbList="breadcrumbList"></mg-breadcrumb>
    <user-info></user-info>
   </div>
  </div>
</template>

<script setup lang="ts">
import { Fold, Expand } from '@element-plus/icons-vue'
import { ref, defineEmits, computed } from 'vue'
import UserInfo from './user-info.vue'
import MgBreadcrumb from '@/base-ui/breadcrumb'
import { useStore } from '@/store'
import { useRoute } from 'vue-router'
import { mapMenusToRoutes } from '@/utils/map-menus'


const emit = defineEmits(['onFoldChange'])
const isFold = ref(false)

const handleFold = () => {
  isFold.value = !isFold.value
  emit('onFoldChange', isFold.value)
}

// 面包屑的内容根据用户登录后的菜单来确定
const store = useStore()
const route = useRoute()
const breadcrumbList = computed(() => {
  // 动态根据菜单和点击路由改变, 动态生成面包屑
  const userMenus = store.state.login.userMenus
  const routePath = route.path
  const routes = mapMenusToRoutes(userMenus, routePath)
  return routes
})

</script>

<style scoped lang="less">
.nav-header {
  display: flex;
  width: 100%;

  .fold-menu {
    font-size: 30px;
    cursor: pointer;
    padding: 10px;
  }
  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    padding: 0 20px;
  }
}
</style>